<template>
	<MenuItem :name="item.path" v-if="!menuHasChildren(item) && getShowMenu" v-bind="IProps" :class="getLevelClass">
		<Icon v-if="getIcon" :icon="getIcon" :size="16" />
		<div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title">
			{{ getI18nName }}
		</div>
		<template #title>
			<span :class="['ml-2', `${prefixCls}-sub-title`]">
				{{ getI18nName }}
			</span>
			<SimpleMenuTag :item="item" :collapseParent="getIsCollapseParent" />
		</template>
	</MenuItem>
	<SubMenu
		:name="item.path"
		v-if="menuHasChildren(item) && getShowMenu"
		:class="[getLevelClass, theme]"
		:collapsedShowTitle="collapsedShowTitle"
	>
		<template #title>
			<Icon v-if="getIcon" :icon="getIcon" :size="16" />

			<div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
				{{ getI18nName }}
			</div>

			<span v-show="getShowSubTitle" :class="['ml-2', `${prefixCls}-sub-title`]">
				{{ getI18nName }}
			</span>
			<SimpleMenuTag :item="item" :collapseParent="!!collapse && !!parent" />
		</template>
		<template v-for="childrenItem in item.children || []" :key="childrenItem.path">
			<SimpleSubMenu v-bind="IProps" :item="childrenItem" :parent="false" />
		</template>
	</SubMenu>
</template>
<script lang="ts">
import type { PropType } from 'vue';
import type { Menu } from '@/router/types';

import { defineComponent, computed } from 'vue';
import { useDesign } from '@/hooks/web/useDesign';
import { Icon } from '#/components';

import MenuItem from './components/MenuItem.vue';
import SubMenu from './components/SubMenuItem.vue';
import { propTypes } from '@/utils/propTypes';
import { createAsyncComponent } from '@/utils/createAsyncComponent';

export default defineComponent({
	name: 'SimpleSubMenu',
	components: {
		SubMenu,
		MenuItem,
		SimpleMenuTag: createAsyncComponent(() => import('./SimpleMenuTag.vue')),
		Icon,
	},
	props: {
		item: {
			type: Object as PropType<Menu>,
			default: () => ({}),
		},
		parent: propTypes.bool,
		collapsedShowTitle: propTypes.bool,
		collapse: propTypes.bool,
		theme: propTypes.oneOf(['dark', 'light']),
	},
	setup(props) {
		const { prefixCls } = useDesign('simple-menu');

		const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
		const getIcon = computed(() => props.item?.icon);
		const getI18nName = computed(() => props.item?.name);
		const getShowSubTitle = computed(() => !props.collapse || !props.parent);
		const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
		const getLevelClass = computed(() => {
			return [
				{
					[`${prefixCls}__parent`]: props.parent,
					[`${prefixCls}__children`]: !props.parent,
				},
			];
		});

		function menuHasChildren(menuTreeItem: Menu): boolean {
			return (
				!menuTreeItem.meta?.hideChildrenInMenu &&
				Reflect.has(menuTreeItem, 'children') &&
				!!menuTreeItem.children &&
				menuTreeItem.children.length > 0
			);
		}

		return {
			IProps: props as Recordable,
			prefixCls,
			menuHasChildren,
			getShowMenu,
			getIcon,
			getI18nName,
			getShowSubTitle,
			getLevelClass,
			getIsCollapseParent,
		};
	},
});
</script>
